<template>
  <div class="page_space btn_space">
    <p class="title_1">基本信息</p>
    <base-card v-if="baseInfo.length > 0" :data="baseInfo" />

    <div class="btn_wrap">
      <button
        :class="enabled ? 'btn danger middle' : 'btn default middle'"
        @click="enableOrDisableOfEquipment"
      >
        {{ enabled ? '停用' : '启用' }}
      </button>
      <button
        class="btn middle"
        @click="goto('/add-equipment?id=' + id + '&type=update')"
      >
        编辑
      </button>
    </div>
  </div>
</template>

<script>
import baseCard from '@/components/base-card'
import { getEquipmentDetail, enableOrDisableOfEquipment } from '@/api/person'
import { getFile } from '@/api/base'
export default {
  name: 'equipmentDetails',
  components: { baseCard },
  data() {
    return {
      // 展示资质信息
      showQualification: false,
      baseInfo: [],
      qualificationList: [],
      id: '',
      getFile: getFile,
      fileList: [
        {
          url: '/manageServer/file/uploadFile.do?action=previewAsImage&fileId=2310091727057800000',
          isImage: true
        },
        {
          url: 'https://img01.yzcdn.cn/vant/leaf.jpg'
        }
      ],
      enabled: ''
    }
  },
  created() {
    this.getEquipmentDetail()
  },
  methods: {
    async getEquipmentDetail() {
      const id = this.$route.query.id
      this.id = id
      const { code, data } = await getEquipmentDetail(id)
      if (code === '0') {
        this.enabled = data.enabled
        this.baseInfo = [
          {
            key: '资产编号',
            value: data.assetCode
          },
          {
            key: '出厂编号',
            value: data.code
          },
          {
            key: '设备名称',
            value: data.name
          },
          {
            key: '品牌/厂家',
            value: data.brand
          },
          {
            key: '所属区划',
            value: data.allAreaName
          },
          {
            key: '设备类型',
            value: data.typeText
          },
          {
            key: '生产日期',
            value: data.productDate
          },
          {
            key: '备注',
            value: data.description
          }
        ]
      }
    },
    // 启用或禁用
    async enableOrDisableOfEquipment() {
      let title = this.enabled ? '是否停用？' : '是否启用？'
      this.$dialog
        .alert({
          title,
          showCancelButton: true
        })
        .then(async () => {
          // on close
          const { code } = await enableOrDisableOfEquipment(this.id)
          if (code === '0') {
            this.$toast.success('操作成功')
            this.getEquipmentDetail()
          } else {
            console.log('fail')
          }
        })
        .catch(() => {
          // on cancel
        })
    }
  }
}
</script>

<style scoped lang="scss"></style>
